import React  from 'react'
import { useNavigate } from 'react-router-dom'
import { getStorage } from '../../utils/storage'
import { Form, Input, Button, Row,Col  } from 'antd'
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import './login.css'
import CaptchaSvg from '../../components/svg/CaptchaSvg'
import { LoginRouterAuth } from '../../router/routerAuth'
import { useLogin } from './hooks/useLogin'
const Login = () => {
    const navigate  = useNavigate()
    // 如果有登录态，则进入系统首页
    const { handleLogin, loading,error,captchaRef } = useLogin()
    // const callChildMethod = useCallback(() => {
    //     if (captchaRef.current) {
    //         captchaRef.current.refreshData();
    //     }
    // }, [captchaRef]);
    return (
        <LoginRouterAuth>
            <Form
                className="login-container"
                onFinish={handleLogin}
            >
                <div className="login_title">系统登录</div>
                <Form.Item
                    name="email"
                    rules={[{required: true, message: '请输入邮箱'}]}
                >
                    <Input size="large" prefix={<UserOutlined className="site-form-item-icon" />} placeholder="邮箱" />
                </Form.Item>
                <Form.Item
                    name="password"
                    rules={[{required: true, message: '请输入密码'}]}
                >
                    <Input.Password
                        size="large"
                        prefix={<LockOutlined className="site-form-item-icon" />}
                        type="password"
                        placeholder="密码"
                    />
                </Form.Item>
                <Form.Item
                >
                    <Row gutter={8}>
                        <Col span={20}>
                            <Form.Item
                                name="captcha"
                                className={"captcha"}
                                rules={[{required: true, message: '请输入验证码'}]}
                                noStyle
                            >
                                <Input
                                    size="large"
                                    style={{ width: '200px' }}
                                    prefix={<LockOutlined className="site-form-item-icon" />}
                                    placeholder="验证码"
                                />
                            </Form.Item>
                        </Col>
                        <Col span={4}>
                            <CaptchaSvg ref={captchaRef}  error={error} />
                        </Col>
                    </Row>
                </Form.Item>
                <Form.Item>
                    <Button size={"large"} loading={loading} style={{ width: '100%' }} type="primary" htmlType="submit" className="login-form-button">
                        登录
                    </Button>
                </Form.Item>
            </Form>
        </LoginRouterAuth>
    )
}

export default Login
